<template>
	<view class="">
		<view class="search" style="margin-bottom: 10rpx;">
			<u-search :clearabled="true" placeholder="请输入商品名称"></u-search>
		</view>
		<view class="container u-flex">
			<view  class="menu ">
				<!-- 点击高亮 -->
				<view @click="active = i" class="item" :class="{active:i=== active}" v-for="(item,i) in menus">{{item}}</view>
			</view>
			<view class="sub-menu">
				<view class="item">坚果</view>
				<view class="item">薯片</view>
				<view class="item">苏果</view>
				<view class="item">牛奶</view>
				 n 
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active: 3,
				menus:['运动','洗护','男装','食品','饰品','家具','电器']
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	
	
.u-search{
	flex: auto;
}

.container{
	flex: 1;
	

		
	.menu{
		width: 200rpx;
		background-color:#ECF5FF;
	
		
		.item{
			padding: 10rpx;
			text-align: center;
			letter-spacing: 2rpx
			&.active{
				background-color: #e3fafd;
				border-left:6rpx solid $uni-color-error;
				font-weight: bold;
				color: $uni-color-error;
				
			}
			
		}
		
	}	
	
	
	.sub-menu{
		flex: 1;
		display: flex;
		
		.item{
			
			
			margin-left: 60rpx;
			border: 1px solid #2979FF;
			width: 20vw;
			height: 20vw;
		}
		
	}
}
</style>
